<template>
  <view class="sign-container">
    <view class="sign-box">
      <view class="header">
        <image class="avatar" src="../../static/images/icon_default_header.png"></image>
        <view class="row_container">
          <text class="name">{{userInfo?.userNickname||'姓名'}}</text>
          <text class="role">业务员</text>
        </view>
      </view>

      <view class="subtitle">
        <uni-data-select :clear="false" :localdata="storeArray" placeholder-style="color:#C3C6CD" placeholder="请选择门店"
          v-model="storeCode" @change="onChange"></uni-data-select>
      </view>

      <view class="status-messages">
        <view v-if="!props.isWithinRange" class="error-message">
          <image class="location" src="../../static/images/icon_failed.png"></image>
          <text>超出签到距离，无法签到</text>
        </view>
      </view>

      <view class="checkin-circle">
        <button @tap="onTab" :disabled="!props.canCheckin" :class="['checkin-btn', { 'checked-in': props.canCheckin }]">
          <view class="checkin-content">
            <view class="checkin-text">
              <text>{{ props.canCheckin ? '点击签到' : '无法签到' }}</text>
            </view>
            <view class="checkin-time">
              {{ currentTime }}
            </view>
          </view>
          <view v-if="showRipple" class="ripple-effect"></view>
        </button>
      </view>


      <view class="success-message">
        <image class="location" src="../../static/images/icon_location.png"></image>
        <text v-if="props.checkinAddress">{{ props.checkinAddress }}</text>
        <text v-else>无法获取定位，请先授权获取位置，去授权</text>
      </view>

    </view>
  </view>
</template>
<script setup lang="ts">
  import { ref, computed, onMounted, onUnmounted } from 'vue'
  import { useMemberStore } from '@/stores'
  import Func from '@/utils/func'
  import { getStoreList } from '@/services/inspection'
  import { getCurrentInstance } from 'vue';


  const userInfo = useMemberStore().getUserInfo()
  const currentTime = ref('')//当前时间
  const showRipple = ref(false) //点击展示水波纹

  const storeArray = ref<any[]>([])

  //界面传参
  const props = defineProps<{
    canCheckin ?: boolean
    hasLocationPermission ?: boolean
    isWithinRange ?: boolean,
    addressNotFound ?: boolean,
    checkinAddress ?: string
  }>()

  const storeCode = ref('')

  const emit = defineEmits(['checkin', 'close', 'storeChange'])

  // 更新时间的函数
  const updateTime = () => {
    const now = new Date()
    currentTime.value = Func.getBeijingTimeISOString()
  }
  //更换门店
  const onChange = (e : any) => {
    console.log(e)
    const target = storeArray.value.find((store : any) => store.value == e)
    console.log(target)
    emit('storeChange', { ...target })

  }
  const onTab = () => {
    // const target = storeArray.value.find((store : any) => store.value == storeCode.value)
    // console.log(target)
    emit('checkin')
  }

  // 设置定时器更新时间
  let timer : number
  onMounted(() => {
    updateTime()
    timer = setInterval(updateTime, 1000)
    getStoreList({ page: 1, rows: 100 }).then((res : any) => {
      if (res.list) {
        res.list.forEach((item : any) => {
          //取经纬度
          let latitude = ''
          let longitude = ''
          if (item.umUserinfoQuaDomainList && item.umUserinfoQuaDomainList.length > 0) {

            item.umUserinfoQuaDomainList.forEach((domain : any) => {
              if (domain.userinfoQuaKey === 'longitude') {
                longitude = domain.userinfoQuaVaule
              } else if (domain.userinfoQuaKey == 'latitude') {
                latitude = domain.userinfoQuaVaule
              }
            })
          }
          //组装数据
          storeArray.value.push({
            text: item.userinfoCompname,
            value: item.userinfoCode,
            latitude,
            longitude,
            cityCode: item.cityCode,
            areaCode: item.areaCode,
            provinceCode: item.provinceCode,
            provinceName: item.provinceName,
            cityName: item.cityName,
            areaName: item.areaName,

          })
        })
      }
    }
    )
    uni.$on('closeDown', () => {
      emit('close')
    })
  })

  // 组件卸载时清除定时器
  onUnmounted(() => {
    clearInterval(timer)
    uni.$off('closeDown')
  })
</script>

<style lang="scss">
  page {
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FA 100%), #FFFFFF;
  }

  .sign-container {
    height: 100vh; // 改为 100% 而不是 100vh
    width: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 30rpx;
    box-sizing: border-box;

    .sign-box {
      background-color: #F9FAFB;
      border-radius: 20rpx;
      width: 100%;
      position: relative;
      flex-grow: 1;

      .header {
        display: flex;
        align-items: center;
        padding: 30rpx;
        border-bottom: 30rpx solid #ffffff;

        .row_container {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 30rpx;

          .name {
            font-size: 32rpx;
            font-weight: 500;
          }

          .role {
            margin-top: 10rpx;
            font-size: 24rpx;
            color: #888E98
          }
        }



        .close-btn {
          color: #a0aec0;

          &:hover {
            color: #4a5568;
          }
        }
      }

      .subtitle {
        text-align: center;
        color: #1C253A;
        background: rgba(179, 220, 246, 0.20);
        font-size: 28rpx;
        margin-top: 50rpx;
        margin-left: 60rpx;
        margin-right: 60rpx;
        border-radius: 16rpx;
        padding: 12rpx;
      }

      .avatar {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
        // background-color: #54B9CC;
      }

      .checkin-circle {
        display: flex;
        justify-content: center;
        margin: 90rpx 0;

        .checkin-btn {
          width: 300rpx;
          height: 300rpx;
          border-radius: 50%;
          border-width: 8rpx;
          transition: all 0.3s;
          position: relative;

          &.checked-in {
            border-color: #6b46c1;
            background-color: #6b46c1;
            color: #ffffff;
          }

          &:not(.checked-in) {
            border-color: #cbd5e0;
            background-color: #f7fafc;
            color: #718096;
          }

          .checkin-content {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: flex;
            flex-direction: column;
            background: linear-gradient(180deg, #3BC7E2 0%, #54B9CC 100%);
            align-items: center;
            justify-content: center;
            color: white;

            .checkin-text {
              font-size: 44rpx;
              font-weight: 500;
            }

            .checkin-time {
              font-size: 26rpx;
            }
          }

          .ripple-effect {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(139, 92, 246, 0.3);
            animation: ripple 0.5s ease-out;
          }
        }
      }

      .status-messages {
        color: #888E98;
        font-size: 30rpx;

        .error-message,
        .success-message {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 30rpx;
          margin-top: 30rpx;

          text {
            padding-left: 20rpx;
            padding-right: 20rpx;
          }

        }


      }

      .bottom-btn {


        button {
          width: 100%;
          padding: 30rpx;
          // background-color: #6b46c1;
          color: #ffffff;
          transition: background-color 0.3s;

          &:hover {
            background-color: #553c9a;
          }
        }
      }
    }
  }

  @keyframes ripple {
    from {
      transform: translate(-50%, -50%) scale(0.5);
      opacity: 1;
    }

    to {
      transform: translate(-50%, -50%) scale(1.5);
      opacity: 0;
    }

    // 继续 .sign-container 样式
    @keyframes ripple {
      from {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
      }

      to {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
      }
    }
  }

  // 全局样式
  page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
      sans-serif;
  }

  // 图标字体样式
  @font-face {
    font-family: 'iconfont';
    src: url('//at.alicdn.com/t/font_12345678.woff') format('woff'),
      url('//at.alicdn.com/t/font_12345678.ttf') format('truetype');
  }

  .iconfont {
    font-family: 'iconfont' !important;
    font-size: 32rpx;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon-close:before {
    content: '\e6e9';
  }

  .icon-alert-circle:before {
    content: '\e7b3';
  }

  .icon-check-circle:before {
    content: '\e77d';
  }

  .location {
    height: 48rpx;
    width: 48rpx;
  }
</style>
